import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'

var w = window.innerWidth, h = window.innerHeight
var camera, scene, renderer, mesh
function init() {
  camera = new THREE.PerspectiveCamera(45, w / h, 1, 10000)

  camera.position.set(0, 350, 0)
  camera.up.z = -1

  scene = new THREE.Scene()

  renderer = new THREE.WebGLRenderer()
  // renderer.setClearColor(0xfefefe)
  renderer.setSize(w, h)

  document.body.appendChild(renderer.domElement)


  var geometry = new THREE.BufferGeometry()
  var positions = [
    -80, 0, 0
  ]
  var colors = [
    1, 0, 0,
    0, 1, 1
  ]

  geometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array(positions), 3))
  geometry.setAttribute('color', new THREE.BufferAttribute(new Float32Array(colors), 3))
  var material = new THREE.LineBasicMaterial({ color: 0xff00ff, side: 20 })

  mesh = new THREE.Line(geometry, material)
  scene.add(mesh)

  var grid = new THREE.GridHelper(130)
  grid.add(mesh)
  scene.add(grid)
}
let x = 0
let arr = []
var p1 = new THREE.Vector3(-80, 0, 0);
var p2 = new THREE.Vector3(20, 0, -70);
var p3 = new THREE.Vector3(10, 0, -200);
var p4 = new THREE.Vector3(80, 0, 0);
// 三维三次贝赛尔曲线
var curve = new THREE.CubicBezierCurve3(p1, p2, p3, p4);
var points = curve.getPoints(100)
function animate() {

  renderer.render(scene, camera)
  if (mesh) {
    x++
    if (x > points.length) return
    let arr = points.slice(0, x)
    let geometry = mesh.geometry
    let position = geometry.attributes.position
    geometry.setFromPoints(arr)
    position.needsUpdate = true
  }

  requestAnimationFrame(animate)

}

init()
animate()
// /** --------------------鼠标控件对象--------------------- */
let controls = new OrbitControls(camera, renderer.domElement); //创建控件对象
controls.addEventListener("change", animate); //监听鼠标、键盘事件
